<template>
	<view v-if='option!=null' class="bigbox">
		<view class="top">
			<image src="/static/image/logo.png"></image>
			<view class="title">{{option.title}}</view>
			<view>参考价格：<span class="price">￥ {{option.price}}</span></view>
			<view class="top-title2">方案描述：</view>
			<view class="top-dec">{{option.miaoshu}}</view>
			<view class="owner">
				<image src="/static/image/logo.png"></image>
				<view>{{option.name}}</view>
			</view>
		</view>
		<view class="bottom">
			<view class="option-taitou">
				<view class="option-taitou-title">配置列表：</view>
			</view>
			<OptionList :options="option" :detail="true"></OptionList>
			<view class="btn-box">
				<button v-if="!zhujishoucang.includes(option._id)" @tap="shoucang()" class="cu-btn bg-blue shadow bottom-btn lg" >收藏到我的配置</button>
				<button v-else  @tap="quxiaoshoucang()">取消收藏</button>
			</view>
			
		</view>
	</view>
</template>

<script>
	const db=wx.cloud.database()
	const _=db.command
	export default {
		data() {
			return {
				option:null,
				zhujishoucang:getApp().globalData.userdata.zhuji
			};
		},
		onLoad(event){
			this.option=JSON.parse(event.data)
		},
		methods:{
			shoucang(){
				getApp().globalData.userdata.zhuji.push(this.option._id)
				this.gengxin()
			},
			quxiaoshoucang(){
				let index=getApp().globalData.userdata.zhuji.indexOf(this.option._id)
				getApp().globalData.userdata.zhuji.splice(index,1)
				this.gengxin()
			},
			gengxin(){
				db.collection('user').where({
					_openid:getApp().globalData.userdata._openid
				}).update({
					data:{
						zhuji:getApp().globalData.userdata.zhuji
					}
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.bigbox{
	
}
.top{
	background-color: white;
	padding: 20px  20px 5px;
	width: 100vw;
	text-align: center;
	image{
		width: 20vw;
		height: 12vh;
	}
	view{
		text-align: left;
		margin-bottom: 10px;
	}
	.title{
		font-size: 18px;
		font-weight: bold;
		text-align: center;
	}
	.price{
		color: red;
	}
	.top-title2{
		margin-bottom: 2vh;
		font-weight: bold;
	}
	.top-dec{
		font-size: 14px;
		line-height: 20px;
		color: black;
	}
	.owner{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		image{
			width: 20px;
			height: 20px;
			margin-right: 5px;
		}
		view{
			font-size: 14px;
			margin-bottom: 0;
		}
	}
}
.bottom{
	margin-top: 20px;
	background-color: white;
	padding: 20px  20px 5px;
	.option-taitou{
		.option-taitou-title{
			color: #000000;
			font-weight: bold;
			font-size: 18px;
		}
	}
	.btn-box{
		text-align: center;
	}
	.bottom-btn{
		width: 60vw;
		margin: 10px auto;
		text-align: center;
		
	}
}
</style>
